<template>
	<view class="content" :style="{height:winH}">
		<view class="roomInfo">
			<view class="list row">
				<view class="pic">
					<image class="img" v-if="roomHouseInfo.picUrls&&roomHouseInfo.picUrls.length" :src="$filters.oosImgZip(roomHouseInfo.picUrls[0])"></image>
				</view>
				<view class="roomMess fill" v-if="layoutId">
					<view class="name">{{roomHouseInfo.layoutName}}</view>
					<view class="area">{{roomHouseInfo.spaceMin}}㎡-{{roomHouseInfo.spaceMax}}㎡</view>
					<view class="price">
						<text class="yellow">{{roomHouseInfo.price}}</text>元/月起
					</view>
				</view>
				<view class="roomMess fill" v-else>
					<view class="name">{{roomHouseInfo.roomHouseName}}</view>
					<view class="area">{{roomHouseInfo.roomHouseTypeName}} | {{roomHouseInfo.space}}㎡ | {{roomHouseInfo.toWard}} | {{roomHouseInfo.isWhole?'整租':'合租'}}</view>
					<view class="price">
						<text class="yellow">{{roomHouseInfo.price}}</text>元/月起
					</view>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="formTitle">预约信息</view>
			<uni-forms :modelValue="formData" :label-width="135">
				<uni-forms-item label="我们怎么称呼您" name="customerName" required>
					<input type="text" v-model="formData.customerName" placeholder="请输入您的姓名" placeholder-style="color:#ccc" />
				</uni-forms-item>
				<uni-forms-item name="hobby" label="您的性别" class="sexbox" required>
					<selectSwitch :switchList="switchList" :defaultSwitch="false" checked_bj_color="#4499FB" @change="switchChange" />
				</uni-forms-item>
				<uni-forms-item name="mobile" label="您的联系方式" required>
					<input type="text" v-model="formData.mobile" placeholder="请输入您的联系方式" placeholder-style="color:#ccc" />
				</uni-forms-item>
				<uni-forms-item name="reserveDate" label="您想什么时候看房" required>
					<dateTimeslot :apartmentId="apartmentId" @changeDatetime="changeDatetime"></dateTimeslot>
				</uni-forms-item>
				<view class="textareaBox">
					<view class="tit">您的其他需求</view>
					<view class="textarea">
						<textarea placeholder="选填" placeholder-style="color:#ccc" :maxlength="200" v-model="formData.remark"/>
						<view class="num">{{formData.remark.length || 0}}/200</view>
					</view>
				</view>
			</uni-forms>
			<view class="btnbox flex">
				<button class="cancle" @click="cancle">取消预约</button>
				<button class="submit" @click="submitForm">确认预约</button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import selectSwitch from "@/components/xuan-switch/xuan-switch.vue";
import dateTimeslot from "@/components/date-timeslot/index.vue";
import { getLayoutInfo,reserveCreate,getRoomHouseInfo } from '@/common/API/room'
const winH = ref()
const formData = reactive({
	customerName: '',
	customerGender: 1,
	mobile: uni.getStorageSync('userPhone'),
	reserveDate: '',
	reserveTime: '',
	timePeriod: '',
	remark: ''
})
const switchList = ref(['女','男'])
const roomHouseInfo = ref({})
const apartmentId = ref()
const layoutId = ref()
const roomHouseId = ref()
const nowTime = ref()

onLoad((options) =>{
	winH.value = uni.getWindowInfo().windowHeight+"px";
	nowTime.value = new Date().getTime();
	if(options.roomHouseId){
		apartmentId.value = options.apartmentId;
		roomHouseId.value = options.roomHouseId;
		getHouseDetail();
	}else{
		apartmentId.value = options.apartmentId;
		layoutId.value = options.layoutId;
		getLayoutDetail();
	}
})

const changeDatetime = (e)=>{
	formData.reserveDate = e.date
	formData.reserveTime = e.time
	formData.timePeriod = e.timeKey
}

const getHouseDetail = async ()=>{
	let data = {
		roomHouseId: roomHouseId.value
	};
	let res = await getRoomHouseInfo(data);
	roomHouseInfo.value = res;
}

const getLayoutDetail = async ()=> {
	let data = {
		apartmentId: apartmentId.value,
		layoutId: layoutId.value
	};
	let res = await getLayoutInfo(data);
	roomHouseInfo.value = res;
}

const switchChange = (isSwitch)=>{
	// 男：1，女：2 数据字典
	formData.customerGender = isSwitch?2:1;
}
const submitForm = async ()=>{
	if(!formData.customerName){
		uni.showToast({
			title:'请填写姓名',
			icon: "none"
		});
		return false;
	}else if(!formData.mobile){
		uni.showToast({
			title:'请填写联系方式',
			icon: "none"
		});
		return false;
	}else if(!formData.reserveDate){
		uni.showToast({
			title:'请选择看房时间',
			icon: "none"
		});
		return false;
	};
	let data = {
		customerName: formData.customerName,
		customerGender: formData.customerGender,
		mobile: formData.mobile,
		reserveDate: formData.reserveDate,
		reserveTimeStart: formData.reserveTime.split('-')[0],
		reserveTimeEnd: formData.reserveTime.split('-')[1],
		timePeriod: formData.timePeriod,
		priceMin: roomHouseInfo.value.price,
		priceMax: roomHouseInfo.value.price,
		address: roomHouseInfo.value.address,
		houseType: roomHouseInfo.value.layoutName,
		id: apartmentId.value?apartmentId.value:roomHouseInfo.value.apartmentId,
		apartmentId: apartmentId.value?apartmentId.value:roomHouseInfo.value.apartmentId,
		apartmentName: roomHouseInfo.value.apartmentName,
		roomId: roomHouseId.value,
		roomFullName: roomHouseInfo.value.roomHouseName,
		remark: formData.remark
	};
	// customerOrigin 客户来源
	// #ifdef MP-WEIXIN
	data.customerOrigin = 6
	// #endif
	// #ifndef MP-WEIXIN
	data.customerOrigin = 18
	// #endif
	let res = await reserveCreate(data)
	uni.showToast({
		title: '预约成功'
	});
	setTimeout(()=> {
		uni.navigateBack();
	}, 1000);
}
// const changeTime = (e)=>{
// 	let now = new Date().getTime();
// 	let bookTime = new Date(e).getTime();
// 	if(now>bookTime){
// 		uni.showToast({
// 			title:'不能小于当前时间',
// 			icon: "none"
// 		});
// 	};
// }

const cancle = ()=>{
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.content{
	padding-top: 16rpx;
	.roomInfo{
		padding: 32rpx 32rpx 0;
		align-items: flex-start;
		background: #fff;
		border-bottom: 2rpx solid #E5E5E5;
		.list{
			padding: 0 0 32rpx;
			.pic{
				width: 220rpx;
				height: 160rpx;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 30rpx;
			}
			.roomMess{
				flex: 1;
				.name{
					font-size: 30rpx;
					font-weight: bold;
					line-height: 48rpx;
				}
				.area{
					line-height: 32rpx;
					margin: 8rpx 0 12rpx;
					font-size: 24rpx;
					color: #999;
				}
				.price{
					font-size: 24rpx;
					color: #666;
					.yellow{
						font-size: 36rpx;
						font-weight: bold;
						margin-right: 6rpx;
					}
				}
			}
		}
	}
	.form{
		background: #fff;
		padding: 30rpx 32rpx 0;
		.formTitle{
			font-size: 32rpx;
			line-height: 48rpx;
		}
		.uni-forms-item{
			border-bottom: 2rpx solid #f5f5f5;
			margin: 0;
			height: 108rpx;
			line-height: 108rpx;
			align-items: center;
			uni-input{
				font-size: 28rpx;
				text-align: right;
			}
			::v-deep.uni-date{
				text-align: right;
				.icon-calendar{
					display: none;
				}
				.uni-date__x-input{
					padding: 0;
				}
			}
		}
		::v-deep.sexbox{
			.uni-forms-item__content{
				text-align: right;
				.switch-container{
					display: inline-block;
				}
			}
		}
		.textareaBox{
			.tit{
				padding-top: 12rpx;
				line-height: 78rpx;
				color: #606266;
			}
			.textarea{
				background: #F5F5F5;
				padding: 16rpx;
				uni-textarea{
					width: 100%;
					height: 200rpx;
				}
				.num{
					text-align: right;
					color: #717171;
				}
			}
		}
		.btnbox{
			padding: 56rpx 0 40rpx;
			.cancle{
				width: 327rpx;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 200rpx;
				font-size: 32rpx;
				color: #666;
				&::after{
					display: none;
				}
			}
			.submit{
				width: 327rpx;
				height: 76rpx;
				line-height: 76rpx;
				background: $uni-color-primary;
				font-size: 32rpx;
				color: #fff;
				border-radius: 200rpx;
				&::after{
					display: none;
				}
			}
		}
	}
}
</style>
